<template>
  <div id="UpdateStaffInfo">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">基础数据</strong></a>
          <span>/</span>
        </li>
        <li><strong>员工信息管理</strong><span>/</span></li>
        <li><strong>修改员工信息</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">

        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>修改员工信息</h2>
          <hr>
        </div>

        <form action="">
          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">编号</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-model="staff.staffId" class="form-control" readonly="readonly" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">姓名</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkStaffName" v-model="staff.staffName" class="form-control" placeholder="请输入员工姓名" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">性别</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-model="staff.staffSex" type="radio" value="1" name="staffSex" > 男 &nbsp;&nbsp;
              <input v-model="staff.staffSex" type="radio" value="0" name="staffSex" > 女
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">邮箱</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkStaffEmail" v-model="staff.staffEmail" class="form-control" placeholder="请输入员工的邮箱" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">电话</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkStaffTel"  v-model="staff.staffTel" class="form-control" placeholder="请输入员工电话" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">出生日期</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkStaffBirth" v-model="staff.staffBirth" type="date" class="form-control" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">职位</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <select v-model="staff.roleId" class="form-control" name="staffPosition" style="width: 400px;">
                <option v-for="item in roles" :value=" item.roleId ">{{ item.role }}</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">状态</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <select v-model="staff.staffState" class="form-control" name="staffState" style="width: 400px;">
                <option v-for="item in staffStates" :value=" item.dictionaryValue">{{ item.dictionaryValue}}</option>
              </select>
            </div>
          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <input v-on:click="updateStaff" type="button" class="btn btn-primary" value="保存">
            <router-link to="StaffInfoList" class="btn btn-default">返回</router-link>
          </div>
        </form>

      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "UpdateStaffInfo",
  data(){
    return{
      staff:{
        staffId:'',
        staffName:'',
        staffSex:'',
        staffEmail:'',
        staffTel:'',
        staffBirth:'',
        staffState:'',
        roleId: 0,
        role:''
      },
      roles:[],
      staffStates:[],
    }
  },
  methods:{
    showStaffInfo(){
      this.$axios.get("/staff/loadStaff",{
        params:{
          staffId:this.$route.query.staffId
        }
      }).then(
        res=>{
          console.log(res.data.data)
          this.staff = res.data.data
        }
      )
    },
    showRole(){
      this.$axios.get("/role/loadAllRoleName").then(
        res =>{
          this.roles = res.data.data.AllRoles;
        }
      )
    },
    showStaffStates(){
      this.$axios.get("/dictionary/getStaffState").then(
        res =>{
          this.staffStates = res.data.data.staffStates
        }
      )
    },
    updateStaff(){
      if (this.checkStaffEmail()){
        if (this.checkStaffBirth()){
          if(this.checkStaffName()){
            if (this.checkStaffTel()){
              if (this.staff.staffSex==''){
                this.$message({
                  showClose: true,
                  message: '请选择员工的性别',
                  type: 'error'
                });
                return;
              }else if (this.staff.staffState==''){
                this.$message({
                  showClose: true,
                  message: '请选择员工的状态',
                  type: 'error'
                });
                return;
              }else if (this.staffroles == 0){
                this.$message({
                  showClose: true,
                  message: '请选择员工的职位',
                  type: 'error'
                });
                return;
              }else {
                this.$axios.put('/staff/updateStaff',this.staff).then(
                  res=>{
                    this.$message({
                      showClose: true,
                      message: res.data.message,
                      type: 'success'
                    });
                    this.$router.push('/MemuBar/StaffInfoList')
                  }
                )
              }
            }
          }
        }
      }
    },
    checkStaffName(){
      if (this.staff.staffName == ''){
        this.$message({
          showClose: true,
          message: '员工名字不可为空',
          type: 'error'
        });
        return false;
      }else if (this.staff.staffName.length>20){
        this.$message({
          showClose: true,
          message: '员工名字不能超过60个字符',
          type: 'error'
        });
        return false;
      } else {
        return true;
      }
    },
    checkStaffEmail(){
      var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (this.staff.staffEmail == ''){
        this.$message({
          showClose: true,
          message: '用户邮箱不能为空',
          type: 'error'
        });
        return false;
      }else if (!reg.test(this.staff.staffEmail)){
        this.$message({
          showClose: true,
          message: '用户邮箱格式不正确',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkStaffTel(){
      var reg = /^((13\d)|(14[5,7,9])|(15[0-3,5-9])|(166)|(17[0,1,3,5,7,8])|(18[0-9])|(19[8,9]))\d{8}/;
      if (this.staff.staffTel == ''){
        this.$message({
          showClose: true,
          message: '用户电话不能为空',
          type: 'error'
        });
        return false;
      }else if (this.staff.staffTel.length != 11){
        this.$message({
          showClose: true,
          message: '用户电话格式不正确',
          type: 'error'
        });
        return false;
      }else if (!reg.test(this.staff.staffTel)){
        this.$message({
          showClose: true,
          message: '用户电话号码不存在',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkStaffBirth(){
      if (this.staff.staffBirth==''){
        this.$message({
          showClose: true,
          message: '用户出生日期不能为空',
          type: 'error'
        });
        return false;
      }else {
        return true
      }
    },
  },
  created() {
    this.showStaffInfo()
    this.showRole()
    this.showStaffStates()
  }
}
</script>

<style scoped>

</style>
